<template>
	<div>
		<div>
			<el-row>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-progress type="circle" :percentage="Lengths.math1" :width="widthss"></el-progress>
						<div Style="color: skyblue">订单总体完成度</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light">
						<div class="grid-content bg-purple">
							<el-progress type="circle" :percentage="Lengths.math2" :width="widthss"></el-progress>
							<div Style="color: skyblue">正在进行的订单</div>
						</div>
					</div>
				</el-col>
				<el-col :span="10">
					<div class="grid-content bg-purple">
						<div class="grid-content bg-purple" Style="height: 212.5px;">
							<el-progress class="progress" :text-inside="true" :stroke-width="26" :percentage="assessList.a5"></el-progress>
							<el-progress class="progress" :text-inside="true" :stroke-width="26" :percentage="assessList.a4" status="success"></el-progress>
							<el-progress class="progress" :text-inside="true" :stroke-width="26" :percentage="assessList.a3" status="warning"></el-progress>
							<el-progress class="progress" :text-inside="true" :stroke-width="26" :percentage="assessList.a2" status="exception"></el-progress>
							<el-progress class="progress" :text-inside="true" :stroke-width="26" :percentage="assessList.a1" status="exception" color="black"></el-progress>
						</div>
					</div>
					<div Style="color: skyblue">订单评价</div>
				</el-col>
				<el-col :span="2">
					<div style="line-height: 2.58;">
					满意<br />
					良好<br />
					不满意<br />
					讨厌<br />
					厌恶<br />
					</div>
					</el-col>
			</el-row>
		</div>
		<!-- 	<el-progress type="circle" :percentage="100"></el-progress>
	<el-progress type="circle" :percentage="100" status="success"></el-progress>
	<el-progress type="circle" :percentage="70" status="warning"></el-progress>
	<el-progress type="circle" :percentage="50" status="exception"></el-progress> -->
	<div>
		<foldLine></foldLine>
	</div>
	</div>
</template>

<script>
		import foldLine from '@/components/fold_line/Fold_line.vue'
	export default {
		props: {
	assessList: {
					a1: 0,
					a2: 0,
					a3: 0,
					a4: 0,
					a5: 0
				},
				a: 0,
				Lengths: {
					math1: 0, //订单总体完成度
					math2: 0, //正在进行的订单
				}
		},
		data() {
			return {
				per1_1: 20,
				per1_2: 20,
				per1_3: 30,
				per1_4: 40,
				widthss:188
			}
		},
		methods: {
			format(percentage) {
				// return percentage === 100 ? '口' : `${percentage}%`;
			}
		},
		components:{
			foldLine
		}
	}
</script>

<style>
	.progress {
		line-height: 2.5;
	}
</style>
